<template>
	<view class="container">
		<!-- 头部装饰区域 -->
		<view class="header-decoration">
			<view class="blue-strip"></view>
			
			<!-- 车辆主题装饰 -->
			<view class="vehicle-theme">
				<!-- 主汽车插图 -->
				<view class="main-car">
					<view class="car-body"></view>
					<view class="car-window"></view>
					<view class="car-wheel wheel-left"></view>
					<view class="car-wheel wheel-right"></view>
					<view class="car-headlight"></view>
					<view class="car-grill"></view>
				</view>
				
				<!-- 道路元素 -->
				<view class="road-elements">
					<view class="road-line road-line-1"></view>
					<view class="road-line road-line-2"></view>
					<view class="road-line road-line-3"></view>
				</view>
				
				<!-- 城市背景 -->
				<view class="city-background">
					<view class="building building-1"></view>
					<view class="building building-2"></view>
					<view class="building building-3"></view>
					<view class="building building-4"></view>
					<view class="building building-5"></view>
				</view>
				
				<!-- 车辆相关装饰 -->
				<view class="vehicle-decorations">
					<view class="speed-lines speed-line-1"></view>
					<view class="speed-lines speed-line-2"></view>
					<view class="speed-lines speed-line-3"></view>
					<view class="parking-sign"></view>
					<view class="traffic-light"></view>
				</view>
				
				<!-- 自然元素 -->
				<view class="nature-elements">
					<view class="leaf leaf-1"></view>
					<view class="leaf leaf-2"></view>
					<view class="leaf leaf-3"></view>
					<view class="leaf leaf-4"></view>
					<view class="leaf leaf-5"></view>
				</view>
				
				<!-- 标题文字 -->
				<view class="theme-title">
					<text class="title-text">添加您的爱车</text>
					<text class="subtitle-text">让出行更便捷</text>
				</view>
			</view>
		</view>
		
		<!-- 表单区域 -->
		<view class="form-section">
			<!-- 车辆类型 -->
			<view class="form-row">
				<view class="label-box">车辆类型</view>
				<view class="input-box" @click="selectVehicleType">
					<text class="placeholder" v-if="!formData.vehicleType">请选择</text>
					<text class="selected-text" v-else>{{ formData.vehicleType }}</text>
				</view>
			</view>
			
			<!-- 车辆型号 -->
			<view class="form-row">
				<view class="label-box">车辆型号:</view>
				<view class="input-box" @click="selectVehicleModel">
					<text class="placeholder" v-if="!formData.vehicleModel">请选择</text>
					<text class="selected-text" v-else>{{ formData.vehicleModel }}</text>
				</view>
			</view>
			
							<!-- 车牌号码 -->
				<view class="form-row">
					<view class="label-box">车牌号码</view>
					<input 
						class="input-box-text" 
						:class="{ 'input-error': plateNumberError }"
						v-model="formData.plateNumber" 
						placeholder="请输入您的车牌号"
						placeholder-class="placeholder"
						@input="validatePlateNumber"
						@blur="validatePlateNumber"
					/>
					<text v-if="plateNumberError" class="error-text">{{ plateNumberError }}</text>
				</view>
				
				<!-- 车主姓名 -->
				<view class="form-row">
					<view class="label-box">车主姓名</view>
					<input 
						class="input-box-text" 
						:class="{ 'input-error': ownerNameError }"
						v-model="formData.ownerName" 
						placeholder="请输入您的姓名"
						placeholder-class="placeholder"
						@input="validateOwnerName"
						@blur="validateOwnerName"
					/>
					<text v-if="ownerNameError" class="error-text">{{ ownerNameError }}</text>
				</view>
				
				<!-- 电话号码 -->
				<view class="form-row">
					<view class="label-box">电话号码</view>
					<input 
						class="input-box-text" 
						:class="{ 'input-error': phoneNumberError }"
						v-model="formData.phoneNumber" 
						placeholder="请输入您的手机号"
						placeholder-class="placeholder"
						type="number"
						@input="validatePhoneNumber"
						@blur="validatePhoneNumber"
					/>
					<text v-if="phoneNumberError" class="error-text">{{ phoneNumberError }}</text>
				</view>
			
			<!-- 照片上传 -->
			<view class="form-row photo-row">
				<view class="label-box">照片</view>
				<view class="photo-upload-box" @click="uploadPhoto">
					<view v-if="!formData.photo" class="upload-placeholder">
						<text class="upload-icon">+</text>
						<text class="upload-text">上传车辆照片</text>
					</view>
					<view v-else class="uploaded-photo">
						<image :src="formData.photo" mode="aspectFill" class="photo-preview"></image>
						<view class="photo-overlay">
							<text class="change-text">点击更换</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部添加按钮 -->
		<view class="add-button" @click="submitForm">
			<text class="add-icon">+</text>
			<text class="add-text">添加车辆</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					vehicleType: '',
					vehicleModel: '',
					plateNumber: '',
					ownerName: '',
					phoneNumber: '',
					photo: ''
				},
				// 验证错误信息
				plateNumberError: '',
				ownerNameError: '',
				phoneNumberError: ''
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			selectVehicleType() {
				const items = ['轿车', 'SUV', 'MPV', '跑车', '货车', '其他'];
				uni.showActionSheet({
					itemList: items,
					success: (res) => {
						this.formData.vehicleType = items[res.tapIndex];
					}
				});
			},
			selectVehicleModel() {
				const items = ['奔驰大G', '奔驰-GTR', '宝马X5', '奥迪A6', '特斯拉Model 3', '其他'];
				uni.showActionSheet({
					itemList: items,
					success: (res) => {
						this.formData.vehicleModel = items[res.tapIndex];
					}
				});
			},
			uploadPhoto() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.formData.photo = res.tempFilePaths[0];
						uni.showToast({
							title: '照片上传成功',
							icon: 'success'
						});
					},
					fail: () => {
						uni.showToast({
							title: '照片上传失败',
							icon: 'none'
						});
					}
				});
			},
			submitForm() {
				// 表单验证
				if (!this.validateForm()) {
					return;
				}
				
				// 提交表单
				uni.showLoading({
					title: '添加中...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					
					// 跳转到成功页面
					uni.navigateTo({
						url: '/pages/my/cardetails_success/cardetails_success'
					});
				}, 1500);
			},
			
			// 表单验证方法
			validateForm() {
				// 验证车辆类型
				if (!this.formData.vehicleType || this.formData.vehicleType.trim() === '') {
					this.showValidationError('请选择车辆类型');
					return false;
				}
				
				// 验证车辆型号
				if (!this.formData.vehicleModel || this.formData.vehicleModel.trim() === '') {
					this.showValidationError('请选择车辆型号');
					return false;
				}
				
				// 验证车牌号码
				if (!this.formData.plateNumber || this.formData.plateNumber.trim() === '') {
					this.showValidationError('请输入车牌号码');
					return false;
				}
				
				// 验证车牌号码格式
				const plateRegex = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
				if (!plateRegex.test(this.formData.plateNumber.trim())) {
					this.showValidationError('请输入正确的车牌号码格式');
					return false;
				}
				
				// 验证车主姓名
				if (!this.formData.ownerName || this.formData.ownerName.trim() === '') {
					this.showValidationError('请输入车主姓名');
					return false;
				}
				
				// 验证车主姓名长度
				if (this.formData.ownerName.trim().length < 2) {
					this.showValidationError('车主姓名至少需要2个字符');
					return false;
				}
				
				// 验证电话号码
				if (!this.formData.phoneNumber || this.formData.phoneNumber.trim() === '') {
					this.showValidationError('请输入电话号码');
					return false;
				}
				
				// 验证手机号格式
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!phoneRegex.test(this.formData.phoneNumber.trim())) {
					this.showValidationError('请输入正确的手机号码');
					return false;
				}
				
				// 验证照片
				if (!this.formData.photo || this.formData.photo.trim() === '') {
					this.showValidationError('请上传车辆照片');
					return false;
				}
				
				return true;
			},
			
			// 显示验证错误信息
			showValidationError(message) {
				uni.showModal({
					title: '提示',
					content: message,
					showCancel: false,
					confirmText: '我知道了',
					confirmColor: '#1976d2'
				});
			},
			
			// 车牌号验证
			validatePlateNumber() {
				const value = this.formData.plateNumber.trim();
				if (!value) {
					this.plateNumberError = '';
					return;
				}
				
				const plateRegex = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
				if (!plateRegex.test(value)) {
					this.plateNumberError = '请输入正确的车牌号码格式';
				} else {
					this.plateNumberError = '';
				}
			},
			
			// 车主姓名验证
			validateOwnerName() {
				const value = this.formData.ownerName.trim();
				if (!value) {
					this.ownerNameError = '';
					return;
				}
				
				if (value.length < 2) {
					this.ownerNameError = '姓名至少需要2个字符';
				} else if (value.length > 10) {
					this.ownerNameError = '姓名不能超过10个字符';
				} else {
					this.ownerNameError = '';
				}
			},
			
			// 手机号验证
			validatePhoneNumber() {
				const value = this.formData.phoneNumber.trim();
				if (!value) {
					this.phoneNumberError = '';
					return;
				}
				
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!phoneRegex.test(value)) {
					this.phoneNumberError = '请输入正确的手机号码';
				} else {
					this.phoneNumberError = '';
				}
			},
			
			// 清除所有错误信息
			clearAllErrors() {
				this.plateNumberError = '';
				this.ownerNameError = '';
				this.phoneNumberError = '';
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f0f2f5;
		display: flex;
		flex-direction: column;
	}
	
	/* 头部装饰区域 */
	.header-decoration {
		height: 400rpx;
		background: linear-gradient(135deg, #e3f2fd, #bbdefb);
		position: relative;
		overflow: hidden;
	}
	
	.blue-strip {
		position: absolute;
		left: 0;
		top: 0;
		width: 8rpx;
		height: 100%;
		background: linear-gradient(180deg, #1976d2, #1565c0);
		z-index: 1;
	}
	
	.vehicle-theme {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.main-car {
		position: relative;
		z-index: 5;
		animation: carFloat 3s ease-in-out infinite;
	}
	
	.car-body {
		width: 280rpx;
		height: 140rpx;
		background: linear-gradient(135deg, #90caf9, #64b5f6, #42a5f5);
		border-radius: 35rpx 35rpx 15rpx 15rpx;
		position: relative;
		box-shadow: 0 12rpx 32rpx rgba(100, 181, 246, 0.4);
	}
	
	.car-window {
		width: 180rpx;
		height: 70rpx;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
		border-radius: 15rpx;
		position: absolute;
		top: 20rpx;
		left: 50rpx;
	}
	
	.car-headlight {
		width: 20rpx;
		height: 20rpx;
		background: radial-gradient(circle, #fff, #ffeb3b);
		border-radius: 50%;
		position: absolute;
		top: 30rpx;
		left: -10rpx;
		box-shadow: 0 0 20rpx rgba(255, 235, 59, 0.6);
	}
	
	.car-grill {
		width: 40rpx;
		height: 8rpx;
		background: linear-gradient(90deg, #424242, #616161);
		border-radius: 4rpx;
		position: absolute;
		top: 50rpx;
		left: -15rpx;
	}
	
	.car-wheel {
		width: 42rpx;
		height: 42rpx;
		background: linear-gradient(135deg, #424242, #212121);
		border-radius: 50%;
		position: absolute;
		bottom: -15rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.4);
	}
	
	.wheel-left {
		left: 35rpx;
	}
	
	.wheel-right {
		right: 35rpx;
	}
	
	/* 道路元素 */
	.road-elements {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 80rpx;
		z-index: 2;
	}
	
	.road-line {
		position: absolute;
		height: 4rpx;
		background: linear-gradient(90deg, transparent, #fff, transparent);
		border-radius: 2rpx;
		animation: roadMove 2s linear infinite;
	}
	
	.road-line-1 {
		width: 200rpx;
		bottom: 20rpx;
		left: 50rpx;
		animation-delay: 0s;
	}
	
	.road-line-2 {
		width: 150rpx;
		bottom: 35rpx;
		left: 100rpx;
		animation-delay: 0.5s;
	}
	
	.road-line-3 {
		width: 180rpx;
		bottom: 50rpx;
		right: 80rpx;
		animation-delay: 1s;
	}
	
	/* 城市背景 */
	.city-background {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 150rpx;
		z-index: 1;
	}
	
	.building {
		position: absolute;
		bottom: 0;
		background: linear-gradient(180deg, rgba(144, 202, 249, 0.4), rgba(100, 181, 246, 0.2));
		border-radius: 8rpx 8rpx 0 0;
	}
	
	.building-1 {
		width: 60rpx;
		height: 100rpx;
		left: 100rpx;
	}
	
	.building-2 {
		width: 70rpx;
		height: 120rpx;
		left: 220rpx;
	}
	
	.building-3 {
		width: 55rpx;
		height: 80rpx;
		right: 120rpx;
	}
	
	.building-4 {
		width: 45rpx;
		height: 90rpx;
		right: 200rpx;
	}
	
	.building-5 {
		width: 50rpx;
		height: 110rpx;
		left: 50rpx;
	}
	
	/* 车辆相关装饰 */
	.vehicle-decorations {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 3;
	}
	
	.speed-lines {
		position: absolute;
		height: 2rpx;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
		border-radius: 1rpx;
		animation: speedMove 1.5s linear infinite;
	}
	
	.speed-line-1 {
		width: 120rpx;
		top: 120rpx;
		left: 80rpx;
		animation-delay: 0s;
	}
	
	.speed-line-2 {
		width: 100rpx;
		top: 140rpx;
		left: 60rpx;
		animation-delay: 0.3s;
	}
	
	.speed-line-3 {
		width: 80rpx;
		top: 160rpx;
		left: 40rpx;
		animation-delay: 0.6s;
	}
	
	.parking-sign {
		position: absolute;
		width: 40rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #ff5722, #d32f2f);
		border-radius: 8rpx;
		top: 200rpx;
		right: 100rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 87, 34, 0.3);
	}
	
	.parking-sign::after {
		content: 'P';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 20rpx;
		font-weight: bold;
	}
	
	.traffic-light {
		position: absolute;
		width: 30rpx;
		height: 80rpx;
		background: linear-gradient(180deg, #424242, #212121);
		border-radius: 15rpx;
		top: 180rpx;
		left: 80rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
	}
	
	.traffic-light::before {
		content: '';
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		background: radial-gradient(circle, #4caf50, #2e7d32);
		border-radius: 50%;
		top: 15rpx;
		left: 5rpx;
		box-shadow: 0 0 10rpx rgba(76, 175, 80, 0.6);
	}
	
	/* 自然元素 */
	.nature-elements {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}
	
	.leaf {
		position: absolute;
		width: 32rpx;
		height: 32rpx;
		background: linear-gradient(135deg, rgba(76, 175, 80, 0.6), rgba(139, 195, 74, 0.4));
		border-radius: 50% 0;
		transform: rotate(45deg);
		animation: leafFloat 4s ease-in-out infinite;
	}
	
	.leaf-1 {
		top: 60rpx;
		left: 120rpx;
		animation-delay: 0s;
	}
	
	.leaf-2 {
		top: 120rpx;
		right: 150rpx;
		animation-delay: 1s;
	}
	
	.leaf-3 {
		bottom: 120rpx;
		left: 200rpx;
		animation-delay: 2s;
	}
	
	.leaf-4 {
		top: 180rpx;
		left: 60rpx;
		animation-delay: 3s;
	}
	
	.leaf-5 {
		top: 240rpx;
		right: 80rpx;
		animation-delay: 1.5s;
	}
	
	/* 主题标题 */
	.theme-title {
		position: absolute;
		top: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		z-index: 4;
	}
	
	.title-text {
		display: block;
		font-size: 32rpx;
		color: black;
		font-weight: bold;
		margin-bottom: 8rpx;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}
	
	.subtitle-text {
		display: block;
		font-size: 24rpx;
		color: #64b5f6;
		font-weight: 400;
		opacity: 0.8;
	}
	
	/* 动画效果 */
	@keyframes carFloat {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-10rpx);
		}
	}
	
	@keyframes roadMove {
		0% {
			transform: translateX(-100%);
		}
		100% {
			transform: translateX(100%);
		}
	}
	
	@keyframes speedMove {
		0% {
			transform: translateX(-100%);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			transform: translateX(100%);
			opacity: 0;
		}
	}
	
	@keyframes leafFloat {
		0%, 100% {
			transform: rotate(45deg) translateY(0);
		}
		50% {
			transform: rotate(45deg) translateY(-8rpx);
		}
	}
	
	/* 表单区域 */
	.form-section {
		flex: 1;
		background-color: white;
		margin: -40rpx 20rpx 0;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx 30rpx 60rpx;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
		position: relative;
		z-index: 10;
	}
	
	/* 表单行 */
	.form-row {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
		min-height: 88rpx;
		position: relative;
	}
	
	.form-row:last-child {
		margin-bottom: 0;
	}
	
	/* 有错误信息的表单行 */
	.form-row:has(.error-text) {
		margin-bottom: 50rpx;
	}
	
	/* 标签框 */
	.label-box {
		width: 160rpx;
		height: 64rpx;
		background: linear-gradient(135deg, #1976d2, #1565c0);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: white;
		font-weight: 500;
		flex-shrink: 0;
		margin-right: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(25, 118, 210, 0.3);
	}
	
	/* 输入框 */
	.input-box {
		flex: 1;
		height: 64rpx;
		background-color: white;
		border-radius: 16rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		border: 2rpx solid #e0e0e0;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.input-box:active {
		border-color: #1976d2;
		box-shadow: 0 4rpx 16rpx rgba(25, 118, 210, 0.15);
	}
	
	.input-box-text {
		flex: 1;
		height: 64rpx;
		background-color: white;
		border-radius: 16rpx;
		padding: 0 24rpx;
		font-size: 26rpx;
		color: #333;
		border: 2rpx solid #e0e0e0;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.input-box-text:focus {
		border-color: #1976d2;
		box-shadow: 0 4rpx 16rpx rgba(25, 118, 210, 0.15);
	}
	
	.input-error {
		border-color: #f44336 !important;
		box-shadow: 0 4rpx 16rpx rgba(244, 67, 54, 0.15) !important;
	}
	
	.placeholder {
		color: #999;
		font-size: 26rpx;
	}
	
	.selected-text {
		color: #333;
		font-size: 26rpx;
	}
	
	.error-text {
		position: absolute;
		bottom: -30rpx;
		left: 180rpx;
		font-size: 22rpx;
		color: #f44336;
		line-height: 1.2;
	}
	
	/* 照片上传行 */
	.photo-row {
		align-items: flex-start;
	}
	
	.photo-upload-box {
		flex: 1;
		height: 240rpx;
		background-color: white;
		border-radius: 16rpx;
		border: 2rpx dashed #e0e0e0;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.photo-upload-box:active {
		border-color: #1976d2;
		box-shadow: 0 4rpx 16rpx rgba(25, 118, 210, 0.15);
	}
	
	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}
	
	.upload-icon {
		font-size: 80rpx;
		color: #999;
		font-weight: 300;
		line-height: 1;
	}
	
	.upload-text {
		font-size: 24rpx;
		color: #999;
	}
	
	.uploaded-photo {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.photo-preview {
		width: 100%;
		height: 100%;
		border-radius: 14rpx;
	}
	
	.photo-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 14rpx;
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	
	.uploaded-photo:active .photo-overlay {
		opacity: 1;
	}
	
	.change-text {
		color: white;
		font-size: 22rpx;
		font-weight: 500;
	}
	
	/* 底部添加按钮 */
	.add-button {
		height: 88rpx;
		background: linear-gradient(135deg, #1976d2, #1565c0);
		margin: 20rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		box-shadow: 0 6rpx 24rpx rgba(25, 118, 210, 0.3);
		position: relative;
		overflow: hidden;
	}
	
	.add-button::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s ease;
	}
	
	.add-button:active::before {
		left: 100%;
	}
	
	.add-button:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 16rpx rgba(25, 118, 210, 0.4);
	}
	
	.add-icon {
		color: white;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.add-text {
		color: white;
		font-size: 30rpx;
		font-weight: 500;
	}
</style>
